<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3-10 (新)Vue中的事件绑定</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <button @click="handleClick($event)">Button</button>

        <!-- <form action="/abc" @click="handleForm"> -->
        <!-- 阻止默认行为 -->
        <form action="/abc" @click.prevent>
            <input type="submit" />
        </form>

        <!-- 点击nice有效,点击hello无效
        self要求,click事件只有在e.target = e.currentTarget的时候才会执行 -->
        <div @click.self="handleOuter">
            nice
            <div>hello world</div>
        </div>

        <div @click.once="handleDiv">yu kai</div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            methods: {
                handleClick(e) {
                    console.log(e);
                },
                handleForm(e) {
                    // e.preventDefault();
                },
                handleOuter() {
                    alert(123);
                },
                handleDiv() {
                    alert("yu kai");
                }
            },
        })
    </script>
</body>

</html>